<template>
  <div class="app-container">
    <el-row>
      <el-col :span="24" :xs="24">
        <el-form
          :inline="true"
          v-show="showSearch"
          label-width="120px"
          :label-position="isPhone ? 'top' : 'left'"
        >
          <el-form-item label="账号">
            <el-input
              v-model="queryParams.userName"
              placeholder="请输入账号"
              clearable
              style="width: 240px"
              @keyup.enter="handleQuery"
            />
          </el-form-item>
          <el-form-item>
            <el-button type="primary" icon="Search" @click="handleQuery"
              >搜索</el-button
            >
            <el-button icon="Refresh" @click="resetQuery">重置</el-button>
          </el-form-item>
        </el-form>
        <right-toolbar
          v-model:showSearch="showSearch"
          @queryTable="handleGetList"
          :columns="columns"
        ></right-toolbar>

        <el-table
          v-loading="loading"
          :data="list"
        >
          <el-table-column
            label="账号"
            align="center"
            key="userName"
            prop="userName"
            v-if="columns[0].visible"
            :show-overflow-tooltip="true"
          />
          <el-table-column
            label="昵称"
            align="center"
            key="nickName"
            prop="nickName"
            v-if="columns[1].visible"
            :show-overflow-tooltip="true"
          />
          <el-table-column
            label="手机号"
            align="center"
            key="phonenumber"
            prop="phonenumber"
            v-if="columns[2].visible"
            :show-overflow-tooltip="true"
          />
          <el-table-column
            label="证件号"
            align="center"
            key="idCard"
            prop="idCard"
            v-if="columns[3].visible"
            width="210"
            :show-overflow-tooltip="true"
          />
          <el-table-column
            label="注册时间"
            align="center"
            key="createTime"
            prop="createTime"
            v-if="columns[5].visible"
            width="160"
          >
            <template #default="scope">
              <span>{{ parseTime(scope.row.createTime) }}</span>
            </template>
          </el-table-column>
        </el-table>
        <pagination
          v-show="total > 0"
          :total="total"
          v-model:page="queryParams.pageNum"
          v-model:limit="queryParams.pageSize"
          @pagination="handleGetList"
        />
      </el-col>
    </el-row>

  </div>
</template>

<script setup name="RegisterList">
import { reactive, ref, toRefs } from "vue";
import { getRegisterList } from "@/api/login";
import { isPhone } from "@/utils/index";

const list = ref([]);
const loading = ref(true);
const showSearch = ref(true);
const total = ref(0);

// 列显隐信息
const columns = ref([
  { key: 0, label: `账号`, visible: true },
  { key: 1, label: `昵称`, visible: true },
  { key: 2, label: `手机号`, visible: true },
  { key: 3, label: `证件号`, visible: true },
  { key: 4, label: `验证码`, visible: true },
  { key: 5, label: `注册时间`, visible: true },
]);

const data = reactive({
  queryParams: {
    pageNum: 1,
    pageSize: 10,
    userName: undefined,
  },
});

const { queryParams } = toRefs(data);

/** 查询列表 */
function handleGetList() {
  loading.value = true;
  getRegisterList(queryParams.value)
    .then((res) => {
      loading.value = false;
      list.value = res.rows || [];
      total.value = res.total || 0;
    })
    .catch(() => {
      loading.value = false;
    });
}

/** 搜索按钮操作 */
function handleQuery() {
  queryParams.value.pageNum = 1;
  handleGetList();
}

function resetQuery() {
  queryParams.value = {
    pageNum: 1,
    pageSize: 10,
    userName: undefined,
  };
  handleQuery();
}

handleGetList();
</script>
<style lang="scss" scoped>
.top-right-btn {
  display: flex;
  justify-content: flex-end;
  margin-bottom: 10px;
}
</style>

